<script setup lang="ts">
import { onMounted,ref } from "vue";
import { useBaseStore } from "@/store/index.ts";
import ElTableTest from "@/components/ElTableTest.vue"
import { themes } from '@/theme/themes';
const basestore = useBaseStore();
const selectValue = ref('')
const colorThemes = ref({})
const setHTMLFontSize = () => {
  const baseFontsize = 10;
  const designWidth = 1920;
  const designHeight = 1080;
  if (window.innerHeight / window.innerWidth <= 0.5625) {
    basestore.setHtmlScaleStore(window.innerHeight / designHeight);
  } else {
    basestore.setHtmlScaleStore(window.innerWidth / designWidth);
  }
  let fontSize = basestore.htmlScale * baseFontsize;
  document.documentElement.style.fontSize = `${fontSize}px`;
};
const changeTheme = (t:string) => {
  basestore.setThemeStore(t)
  // basestore.setColorsStore();
};
onMounted(() => {
  colorThemes.value = themes
  selectValue.value = 'dark'
  setHTMLFontSize();
  window.addEventListener("resize", setHTMLFontSize);
  basestore.setThemeStore('dark')
});
</script>

<template>
  <div class="main-layout">
    <el-container class="aquaborder">
      <el-header>
        <div class="change-theme">
          <el-select v-model="selectValue" placeholder="Select" size="small">
            <el-option v-for="item in colorThemes" :key="item['themeKey']" :label="item['themeName']" :value="item['themeKey']" :style="'color:'+item['titleColor']+';background-color: '+item['bgRgColor0']+';height: 3rem;line-height: 3rem;font-size: 1.6rem;'" @click="changeTheme(item['themeKey'])"/>
          </el-select>
        </div>
      </el-header>
      <el-main>
        <div class="main-item main-side-item aquaborder"></div>
        <div class="main-item main-center-item aquaborder"></div>
        <div class="main-item main-side-item aquaborder"></div>
      </el-main>
      <el-footer>
        <div class="footer-item aquaborder">
          <ElTableTest></ElTableTest>
        </div>
        <div class="footer-item aquaborder"></div>
        <div class="footer-item aquaborder"></div>
        <div class="footer-item aquaborder"></div>
      </el-footer>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.aquaborder {
  border: 0.1rem solid aqua;
}
.main-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background-image: radial-gradient(
    farthest-corner at 50% 35%,
    @bgRgColor0,@bgRgColor1,@bgRgColor2
  );
  .el-container {
    width: 90%;
    height: 100vh;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    .el-header {
      height: 10%;
      padding: 0;
      box-sizing: border-box;
      .change-theme{
        width: fit-content;
        height: 10rem;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 98;
        .themeButton{
          margin: 0 1rem;
        }
        .el-select{
          width: 16rem;
          height: 3rem;
          line-height: 3rem;
          :deep(.el-select__wrapper){
            height: 3rem;
            line-height: 3rem;
            background-color:@bgRgColor0;
            .el-select__selected-item{
              height: 3rem;
              line-height: 3rem;
              font-size: 1.6rem;
              color:@titleColor;
            }
          }
        }
      }
    }
    .el-main {
      height: 55%;
      display: flex;
      align-items: center;
      padding: 0;
      box-sizing: border-box;
      .main-item {
        height: 100%;
        box-sizing: border-box;
      }
      .main-side-item {
        width: 30%;
      }
      .main-center-item {
        width: 40%;
      }
    }
    .el-footer {
      height: 35%;
      display: flex;
      align-items: center;
      padding: 0;
      box-sizing: border-box;
      .footer-item {
        width: 25%;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>
